<template>
    <el-dialog v-model="show" width="400" align-center center :show-close="false">
        <div class="sure">
            <div>
                <el-icon>
                    <Warning />
                </el-icon>
            </div>
            <span>{{ title }}</span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    {{ btnText }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    title: {
        type: Object,
        default: () => { }
    },
    btnText: {
        type: String,
        default: '确定'
    }
})
const emit = defineEmits(['comfirm']);
const show = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
})
const handleConfirm = () => {
    emit('comfirm')
}
</script>

<style lang="scss" scoped>
.sure {
  text-align: center;

  ::v-deep(.el-icon) {
    font-size: 60px;
    margin-bottom: 20px;
    color: rgb(255, 51, 51);
  }
}
</style>